<script setup lang="jsx">
import { ref } from 'vue';
import { useNow } from '@vueuse/core';
import dayjs from 'dayjs';
import Codemirror from '@/components/common/codemirror.vue';

const now = useNow();

const code = ref(
  '[\n' +
    '  {\n' +
    '    "id": 1923096579,\n' +
    '    "liaohao": "HP4366296A2",\n' +
    '    "width": "721.0",\n' +
    '    "height": "616.0",\n' +
    '    "plate_thickness": "1.530",\n' +
    '    "copper_plating_time": "45",\n' +
    '    "ch_ASD_positive1": "330",\n' +
    '    "ch_ASD_positive2": "330",\n' +
    '    "ch_ASD_positive3": "330",\n' +
    '    "ch_ASD_positive4": "330",\n' +
    '    "ch_ASD_positive5": "330",\n' +
    '    "ch_ASD_positive6": "330",\n' +
    '    "ch_ASD_positive7": "330",\n' +
    '    "ch_ASD_positive8": "330",\n' +
    '    "ch_ASD_positive9": "330",\n' +
    '    "ch_ASD_positive10": "330",\n' +
    '    "ch_ASD_positive11": "330",\n' +
    '    "ch_ASD_positive12": "330",\n' +
    '    "ch_ASD_positive13": "330",\n' +
    '    "ch_ASD_positive14": "330",\n' +
    '    "ch_ASD_positive15": "330",\n' +
    '    "ch_ASD_positive16": "330",\n' +
    '    "ch_ASD_positive17": "330",\n' +
    '    "ch_ASD_positive18": "330",\n' +
    '    "ch_ASD_positive19": "330",\n' +
    '    "ch_ASD_positive20": "330",\n' +
    '    "ch_ASD_behind1": "330",\n' +
    '    "ch_ASD_behind2": "330",\n' +
    '    "ch_ASD_behind3": "330",\n' +
    '    "ch_ASD_behind4": "330",\n' +
    '    "ch_ASD_behind5": "330",\n' +
    '    "ch_ASD_behind6": "330",\n' +
    '    "ch_ASD_behind7": "330",\n' +
    '    "ch_ASD_behind8": "330",\n' +
    '    "ch_ASD_behind9": "330",\n' +
    '    "ch_ASD_behind10": "330",\n' +
    '    "ch_ASD_behind11": "330",\n' +
    '    "ch_ASD_behind12": "330",\n' +
    '    "ch_ASD_behind13": "330",\n' +
    '    "ch_ASD_behind14": "330",\n' +
    '    "ch_ASD_behind15": "330",\n' +
    '    "ch_ASD_behind16": "330",\n' +
    '    "ch_ASD_behind17": "330",\n' +
    '    "ch_ASD_behind18": "330",\n' +
    '    "ch_ASD_behind19": "330",\n' +
    '    "ch_ASD_behind20": "330",\n' +
    '    "cycle_time": "410",\n' +
    '    "xb": "B",\n' +
    '    "lotnum": null,\n' +
    '    "pumpFrequency": "",\n' +
    '    "sendResult": null,\n' +
    '    "errorReason": null,\n' +
    '    "subEqpID": null,\n' +
    '    "lot_NO": "HP4366296A2"\n' +
    '  }\n' +
    ']'
);

const formList = [
  {
    type: 'select',
    key: 'gongxu',
    label: '工序',
    placeholder: '请选择工序',
    span: 6,
    selectOptions: [
      {
        label: '沉铜',
        value: '沉铜'
      },
      {
        label: '黑影',
        value: '黑影'
      }
    ]
  },
  {
    type: 'input',
    key: 'xb',
    label: '制程线',
    readonly: true,
    span: 6
  },
  {
    type: 'input',
    key: 'liaohao',
    label: '生产批号',
    placeholder: '请输入生产批号',
    span: 6
  }
];
const searchParams = ref({
  lotId: '沉铜',
  xb: 'B',
  liaohao: null
});

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    fixed: 'left',
    checked: true,
    ellipsis: true,
    width: 110
  },
  {
    key: 'lotId',
    dataIndex: 'lotId',
    title: '批卡号',
    align: 'center',
    fixed: 'left',
    checked: true,
    ellipsis: true,
    width: 120
  },

  {
    key: 'path',
    dataIndex: 'path',
    title: '配方',
    align: 'center',
    width: 370,
    checked: false,
    ellipsis: true
  },

  {
    key: 'testVoltage',
    dataIndex: 'testVoltage',
    title: '测试电压(V)',
    align: 'center',
    checked: false,
    ellipsis: true,
    width: 150
  },
  {
    key: 'openCircuitResistance',
    dataIndex: 'openCircuitResistance',
    title: '开路电阻',
    align: 'center',
    checked: false,
    ellipsis: true,
    width: 120
  },
  {
    key: 'insulationResistance',
    dataIndex: 'insulationResistance',
    title: '绝缘电阻',
    align: 'center',
    checked: false,
    ellipsis: true,
    width: 120
  },

  {
    key: 'sendResult',
    dataIndex: 'sendResult',
    title: '下发结果',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 100,
    customRender: ({ record }) => {
      return <span class={record.sendResult.includes('成功') ? 'color-green' : 'color-red'}>{record.sendResult}</span>;
    }
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '下发时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'operator',
    dataIndex: 'operator',
    title: '操作人',
    width: 100,
    align: 'center',
    checked: true,
    ellipsis: true
  }
];
const url = ref('/mes/PFlyingNeedle/find');
</script>

<template>
  <div class="down-page h-full w-full">
    <div class="header mb-10px h-60px w-full bg-#a7acff text-center text-size-18px color-#fff font-bold">
      <div class="title">参数下发管理</div>
      <div class="time">{{ dayjs(now).format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
    <ARow :gutter="16" class="down-content h-full w-full">
      <ACol :span="8" class="h-full">
        <Table
          :column="column"
          :show-row-selection="false"
          :auto-generate-uuid="true"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          :url="url"
          class="h-full"
        >
          <template #title>下发记录</template>
        </Table>
      </ACol>
      <ACol :span="16" class="h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
        <div class="search">
          <CommonSearch v-model:searchParams="searchParams" :form-list="formList" :is-search="false">
            <template #other>
              <AButton type="primary" ghost class="mini-btn">
                <template #icon>
                  <i class="icon iconfont icon-peifangxiafa ant-menu-item-icon align-sub text-icon"></i>
                </template>
                <span class="ml-3px">确定下发</span>
              </AButton>

              <AButton class="mini-btn">
                <template #icon>
                  <icon-ic-round-refresh class="align-sub text-icon" />
                </template>
                <span class="ml-3px">重置</span>
              </AButton>
            </template>
          </CommonSearch>
        </div>

        <Codemirror v-model:value="code" read-only="nocursor" />
      </ACol>
    </ARow>
  </div>
</template>

<style scoped lang="scss">
.header {
  .time {
    font-family: electronicFont;
    font-weight: bold;
  }
}

.down-content {
  height: calc(100% - 70px);
}
</style>
